<!doctype html>
<html>
  <meta charset=utf-8>
  <title>jQuery Resize Plugin Demo</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="../src/jquery.ae.image.resize.js"></script>
  <script>
    $(function() {
      $( ".resizeme" ).aeImageResize({ height: 250, width: 250 });
    });
  </script>
  <h1>jQuery Resize Plugin Demo</h1>
  <p><b>Author:</b> Adeel Ejaz (<a href="http://adeelejaz.com/">http://adeelejaz.com/</a>)
  <p><b>License:</b> Dual licensed under <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a> or <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a> licenses.

  <h2>Introduction</h2>
  <p>aeImageResize is a jQuery plugin to dynamically resize the images without distorting the proportions.

  <h2>Usage:</h2>
  <pre>.aeImageResize( height, width )</pre>
  <p><code style="font-weight:bold">height</code> An integer representing the maximum height for the image.
  <p><code style="font-weight:bold">width</code> An integer representing the maximum width for the image.

  <h2>Example</h2>
  <pre>$(function() {
  $( ".resizeme" ).aeImageResize({ height: 150, width: 150 });
});</pre>
  <ul>
    <li>
      <h3>Sample 1</h3>

      <h4>Original</h4>
      <img alt="Original Sample Image 1 - 400px x 300px" height=300 src="sample1.jpg" width=400>

      <h4>Resized to 250px x 250px</h4>
      <img alt="Resized Sample Image" class=resizeme height=300 src="sample1.jpg" width=400>
    <li>
      <h3>Sample 2</h3>

      <h4>Original</h4>
      <img alt="Original Sample Image 2 - 300px x 400px" height=400 src="sample2.jpg" width=300>

      <h4>Resized to 250px x 250px</h4>
      <img alt="Resized Sample Image" class=resizeme height=400 src="sample2.jpg" width=300>
  </ul>

  <h2>Other</h2>
  <p>Sample images by <a href="http://www.freedigitalphotos.net/">FreeDigitalPhotos.net</a>.
